<template>
    <div class="workbeanch-main-box">
        <workbench-resource></workbench-resource>
        <WorkbenchEditor></WorkbenchEditor>
        <div ref="wnr" />

        <div class="workbeanch-navbar-right" :to="$refs.wnr">
            <dbant-navbar :reverse="true" :default-select="-1" direction="vertical" :spliter="true" ref="navbar"
                :renderItem="renderItem">
                <!-- <dbant-navbar-item v-for="item in toolbars" :key="item.key" :title="item.title" :icon="item.icon" >
                  	<dbant-resizer :max="420" :min="240" :value="240" direction='x' :reverse="true">
                               <component :is="item.component" v-bind="item.data"></component>
                    </dbant-resizer>
                </dbant-navbar-item> -->
            </dbant-navbar>
        </div>
    </div>
</template>



<script setup>
import WorkbenchResource from "./workbench-resource.vue"
import WorkbenchEditor from './workbeanch-editor.vue'
import { inject, ref, nextTick, resolveComponent, reactive } from 'vue'
import dataViewer from "./resource/dataViewer.vue";
const $bus = inject('$bus')
const $config = inject('$config')
const toolbars = reactive([]);
const navbar = ref(null)
const renderState = ref(false)
toolbars.push({
    key: 'dataViewer',
    title: '数据查看器',
    data: {},
    icon: '#el-icon-search',
    component: dataViewer,
    ref: null
});
$bus.$on($config.TEXT_VALUE_VIESER, (event) => {
    const index = toolbars.findIndex(it => it.key === event.type)
    if (index > -1) {
        //  navbar.value.select(index)
        toolbars[index].ref.upateData(event.data);
    }

});
nextTick(() => renderState.value = true);
const setItemRef = (el) => {
    if (el) {
        const toolbar = toolbars.find(it => it.key === el.name)
        toolbar.ref = (el)
    }
}

const renderItem = (h) => {
    return toolbars.map((item, index) => h(resolveComponent('dbant-navbar-item'), {
        key: item.key,
        title: item.title,
        icon: item.icon,
    },
        h(resolveComponent("dbant-resizer"), {
            max: 420, min: 240, value: 240, direction: 'x', reverse: true
        }, h(item.component, { 'v-bind': item.data, 'ref': setItemRef })))
    )

}

</script>

<style lang="scss"   scoped>
.workbeanch-main-box {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    flex: 1;

}


.workbeanch-main-box .workbeanch-navbar-right {
    // position: absolute;
    flex-direction: row-reverse;
    // width: 30px;
    // right: 0;
    height: 100%;
}
</style>